<!-- 任务大厅 -->
<template>
  <div>
    <van-search
      v-model="searchVal"
      @search="onSearch"
      placeholder="请输入搜索关键词"
    />
    <div class="line"></div>
    <van-tabs v-model="active">
      <van-tab title="任务列表">
        <!-- 任务列表单位 -->
        <div v-if="dataList.length !== 0">
          <div v-for="item in dataList" :key="item.id" class="facility">
            <div class="message">
              <div>{{ item.processVariables.itemName || '未命名' }}</div>
              <div style="font-size: 12px; margin-top: 10px">
                {{
                  item.processDetail.CATEGORY_ === 'repair'
                    ? '维修'
                    : item.processDetail.CATEGORY_ === 'maintain'
                    ? '维保'
                    : item.processDetail.CATEGORY_ === 'patrol'
                    ? '巡更'
                    : item.processDetail.CATEGORY_ === 'inspection'
                    ? '巡检'
                    : '类型出错'
                }}
                &nbsp;&nbsp;&nbsp;
                {{ getTime(item.createTime) }}
              </div>
            </div>
            <van-button @click="grasp(item)"> 抢单 </van-button>
          </div>
        </div>

        <div class="tipMsg" v-else>暂无数据</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Search, Divider, Button, ActionSheet, Toast } from 'vant'
import { task, putTask, getCheckStatus } from '@/api/index'

import moment from 'moment'

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Divider.name]: Divider,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet
  },
  data () {
    return {
      searchVal: '',
      active: 0,
      show: false,
      actions: [{ name: '保修' }, { name: '设备台账' }],
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      dataList: [],
      userInfo: {}
    }
  },

  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    onSelect (item) {
      const { name } = item
      switch (name) {
        case '保修':
          this.$router.push('/standingBook-guarantee')
          break
        case '设备台账':
          this.$router.push('/standingBook-detail')
          break
      }
    },
    onSearch (e) {
      console.log(e)
      if (e === '') {
        Toast('请输入内容后查询')
      } else {
        this.getList()
      }
    },
    look () {
      this.$router.push('/polling-detail')
    },
    // 点击抢单
    grasp (item) {
      console.log('点击抢单')
      // 调接口修改当前item状态
      this.editItem(item)
    },
    // 根据时间戳获取正确格式的事件
    getTime (params) {
      console.log(params)

      const res = moment(params).format('YYYY-MM-DD HH:mm:ss')
      console.log(res)
      return res
    },
    // 获取待抢单任务列表
    async getList () {
      const params = {
        taskNameList: '抢单',
        withProcessDetail: 1,
        withVariables: 1,
        tenantId: window.localStorage.getItem('tenantId'),
        conditionKeyLike: 'taskName',
        conditionValueLike: this.searchVal
      }
      try {
        const res = await task(params)
        this.dataList = res.list
        console.log(res)
        if (this.searchVal !== '') {
          Toast('查询成功')
          this.searchVal = ''
        }
      } catch (error) {}
    },
    // 修改任务状态---点击抢单后
    async editItem (item) {
      console.log(item)

      try {
        await this.getStatus()
        const res = await putTask({
          complete: 1,
          taskId: item.id,
          variables: { owner: this.userInfo.id }
          // tenantId: window.localStorage.getItem('tenantId')
        })
        console.log(res)
        Toast('您已抢单成功')
        // 抢单成功后重新获取列表
        this.getList()
        // 抢单成功后，跳转至对应的（四大类型任务）页面
        const aa = item.processDetail.CATEGORY_
        console.log(aa)
        switch (aa) {
          case 'repair':
          // 维修
            console.log('1243')
            this.$router.push('/service')
            break
          case 'maintain':
          // 维保
            console.log('1243')
            this.$router.push('/maintain')
            break
          case 'patrol':
          // 巡更
            console.log('1243')
            this.$router.push('/electronic')
            break
          case 'inspection':
          // 巡检
            this.$router.push('/polling')
            break
          default:
            console.log('1243')
        }
      } catch (error) {
        console.log('cuoqu')
        putTask()
      }
    },
    // 获取登录状态
    async getStatus () {
      const getToken = () => window.localStorage.getItem('token')
      try {
        const res = await getCheckStatus({
          authorization: getToken()
        })
        this.userInfo = res.userInfo
      } catch (error) {}
    }
  }
}
</script>
<style lang='less' scoped>
.line {
  width: 100%;
  height: 1px;
  border: 1px solid rgba(242, 242, 242, 1);
}
.facility {
  height: 60px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .message {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
.tipMsg {
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 20px;
  color: grey;
  text-align: center;
}
</style>
